Cara Membuat Slideshow Jquery Terhebat dibawah Header

Cara Membuat Slideshow Jquery Terhebat dibawah Header
Slideshow Jquery merupakan cara menampil kan photo secara animasi atau bergerak yang akan memperindah tampilan blog,,,Selain itu juga bisa dijadikan Alat Navigasi Pada blog karena saat foto di klik maka akan terarah pada postingan yang dituju
 Oke gak perlu panjang X lebar langsung aja kita coba semoga berhasil...Untuk melihat "DEMO"nya silahkan lihat pada atas postingan ini

Cara Membuatnya cukup mudah:

    Masuk ke Blogger
    Pilih Rancangan >> lalu Edit HTML

Langkah 1 sebagai berikut:
Copy kode dibawah ini, kemudian paste dibawah kode : </body>

<script type="" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"judul photo 1","desc":"Keterangan photo 1"},{"id":"slide-img-2","client":"judul photo 2","desc":"Keterangan photo 2"},{"id":"slide-img-3","client":"judul photo 3","desc":"Keterangan photo 3"},{"id":"slide-img-4","client":"judul photo 4","desc":"Keterangan photo 4"},{"id":"slide-img-5","client":"judul photo 5","desc":"Keterangan photo 5"},{"id":"slide-img-6","client":"judul photo 6","desc":"Keterangan photo 6"},{"id":"slide-img-7","client":"judul photo 7","desc":"Keterangan photo 7"}];
</script>

Ganti tulisan Judul photo dan keterangan photo dengan tulisan yamg ingin ditampilkan

Langkah 2 :

Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

* {

margin : 0;

padding : 0;

}

html {

height : 100%;

}

body {

height : 100%;

color : #a4a4a4;

cursor : default;

font-size : 11px;

line-height : 16px;

text-align : center;

background-color : #000;

background-position : 50% 0;

background-repeat : no-repeat;

font-family : Tahoma, sans-serif;

}

a:link, a:visited {

color : #fff;

text-decoration : none;

}

a img {

border : 0;

}

div.wrap {

width : 993px;

margin : 0 auto;

text-align : left;

}

div#top div#nav {

float : left;

clear : both;

width : 993px;

height : 52px;

margin : 22px 0 0;

}

div#top div#nav ul {

float : left;

width : 700px;

height : 52px;

list-style-type : none;

}

div#nav ul li {

float : left;

height : 52px;

}

div#nav ul li a {

border : 0;

height : 52px;

display : block;

line-height : 52px;

text-indent : -9999px;

}

div#header {

margin : -1px 0 0;

}

div#video-header {

height : 683px;

margin : -1px 0 0;

}

div#header div.wrap {

height : 299px;

background : url(images/header-bg.png) no-repeat 50% 0;

}

div#header div#slide-holder {

z-index : 40;

width : 993px;

height : 299px;

position : absolute;

}

div#header div#slide-holder div#slide-runner {

top : 9px;

left : 9px;

width : 973px;

height : 278px;

overflow : hidden;

position : absolute;

}

div#header div#slide-holder img {

margin : 0;

display : none;

position : absolute;

}

div#header div#slide-holder div#slide-controls {

left : 0;

bottom : 228px;

width : 973px;

height : 46px;

display : none;

position : absolute;

background : url(images/slide-bg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text {

float : left;

color : #fff;

display : inline;

font-size : 10px;

line-height : 16px;

margin : 15px 0 0 20px;

text-transform : uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav {

float : right;

height : 24px;

display : inline;

margin : 11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a {

float : left;

width : 24px;

height : 24px;

display : inline;

font-size : 11px;

margin : 0 5px 0 0;

line-height : 24px;

font-weight : bold;

text-align : center;

text-decoration : none;

background-position : 0 0;

background-repeat : no-repeat;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on {

background-position : 0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a {

background-image : url(images/silde-nav.png);

}

div#nav ul li a {

background : url(images/nav.png) no-repeat;

}

Catatan ubah dulu ukuran foto/gambar menjadi

Tinggi 973 px lebar 278px atau sesuaikan dengan template blog anda

Langkah 3:

Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/epgstudiosite/javascript/scripts.js' type='text/javascript'/>

Klik Tombol Simpan Template

Langkah 4:

•     >>> Masuk ke Dasbor
•     >>>Pilih Rancangan Bagian Elemen Halaman.
•     >>>Klik Tambah Gadget.
•     >>>Pilih HTML/Javascrpt

    Copy kode dibawah ini kemudian paste pada kotak yang tersedia

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=" http://pesona-jati.blogspot.com/2014/03/dipan-atau-ranjang-2-in-1.html "><img id="slide-img-1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1EzMybHt5yxT3UsW-2esqk-Ix19glL8LHWvrDqeGLGQnsIqMar3EJJ7ko1DSxG6aB6OK6lYV8wzTXPjelHw7vZILom_niRfOEtPsaG1S7CSGcGoLnQxMSczrj_aVfmnkY0iUW4nf6W8/s1600/dipan+mentah.jpg" class="slide" alt="" /></a>
<a href=" http://pesona-jati.blogspot.com/2014/03/dipan-atau-ranjang-2-in-1.html "><img id="slide-img-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddcT5VcUigvRzoH3dkhjJMH4rHI12l8LGCuFkVTjzLFKzKQaXweI2LWYh0fBeW4JVEtmgQcwnLCa9oDV-Y2swVYKBIorGAR22syZMDN0wPkkvz95Vio25MrJh6v3c6olcQyNlEJBFz2w/s1600/dipan+finishing.jpg" class="slide" alt="" /></a>
<a href=" http://pesona-jati.blogspot.com/2014/03/dipan-atau-ranjang-2-in-1.html "><img id="slide-img-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichK-FfRgupw22tmkWD-g-mSYTILJ_n8MWRHCGDHE-axSCMlKUbCdd62KjIekIfOzhrpJ-l5_7F3aPPqapobPeMLfE2uOxyHvlJ4SdMO4MNIiV2pmSPocPAfqapv216RwOtTaWe2hyiCQ/s1600/lawang.jpg" class="slide" alt="" /></a>
<a href=" http://pesona-jati.blogspot.com/2014/03/dipan-atau-ranjang-2-in-1.html "><img id="slide-img-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_FlTaM-9OJnK16WFejvnAfnm-wUJjj0e3w_lz-G9AETG4ne6vefzSR89Ut3OQzC7JjrkCwBWZhpBmrkJiZ7TUQ8ZzDpVCePwgQNJtTb5buLKblWHRHG96tNrEpJMw0IGA0kK_G0eNt4/s1600/jati+belah.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUGUs15GxmR7awmIfhc97P04EJhtmAN7AT2xNz2MrT1bLYoHihuENkc6mAHYZdh0Uzml7eWiOvUDgStipy_YVmtMXgOCLXSuyQepgBf2_7GwV63fABbKjzdNiowzNMkCmQGkGGiNX2lk/s1600/jati+glondongan.jpg" class="slide" alt="" /></a>
<a href=" http://pesona-jati.blogspot.com/2013/11/blog-post.html "><img id="slide-img-6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MOsWAoH0DhnVOJ6vxBEeUa95F_ENqqJPYJa2ZV7cBAV5dAr5GV1bnYRYd2rfjHqaH7vOfyq5_jbzep4lwxvKhmZ9j60I8SR8sPjFBd4WE7uR5JQLxs_72O-29OVUJafh4qElBI73gdM/s1600/buffet+mentah.jpg" class="slide" alt="" /></a>
<a href=" http://pesona-jati.blogspot.com/2013/11/blog-post.html "><img id="slide-img-7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBL-Wy47N5T0EAjFzDOoJS3uZ9-mzEo-VwxyregWMFwDdNPhUL2FiNKDSnddDPGt2OtYIHDECwACrmzVVMo-EVOL72dsXCOB7uwuSbuRanClJfNUDbT8X-KpqokYHSW4FmFNqenO-MoM/s1600/buffet+finishing.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

CATATAN code

@Ubah warna merah dengan URL tujuan anda

@Ubah warna biru dengan URL gambar anda

Terakhir klik save dan lihat hasilnya.         SEMOGA BERHASIL